<template>
    <div class="course-card" @click="toggleContent">
        <div class="header" style="width: 1000px;">
            <span v-for="(text, index) in headers" :key="index" :class="{ active: index === currentHeader }"
                @click="setHeader(index)">
                {{ text }}
            </span>
        </div>

        <RouterLink to="/coursedetail">
            <div class="image-group" v-if="currentHeader === 0" style="width: 100%;">
                <div class="image-card" v-for="(image, index) in imageData" :key="index">
                    <img v-bind:style="{ width: '60%', height: 'auto' }" :src="image.src" alt="课程图片{{ index + 1 }}" />
                    <div class="image-info">
                        <h4>{{ image.title }}</h4>
                        <p>{{ image.tags.join(', ') }}</p>
                    </div>
                </div>
            </div>
        </RouterLink>

        <RouterLink to="/coursedetail">
            <div class="image-group" v-if="currentHeader === 1" style="width: 100%;">
                <div class="image-card" v-for="(image, index) in imageData.slice(8, 10)" :key="index">
                    <img v-bind:style="{ width: '60%', height: 'auto' }" :src="image.src" alt="课程图片{{ index + 1 }}" />
                    <div class="image-info">
                        <h4>{{ image.title }}</h4>
                        <p>{{ image.tags.join(', ') }}</p>
                    </div>
                </div>
            </div>
        </RouterLink>

        <RouterLink to="/coursedetail">
            <div class="image-group" v-if="currentHeader === 2" style="width: 100%;">
                <div class="image-card" v-for="(image, index) in imageData" :key="index">
                    <img v-bind:style="{ width: '60%', height: 'auto' }" :src="image.src" alt="课程图片{{ index + 1 }}" />
                    <div class="image-info">
                        <h4>{{ image.title }}</h4>
                        <p>{{ image.tags.join(', ') }}</p>
                    </div>
                </div>
            </div>
        </RouterLink>


        <div class="image-group" v-if="currentHeader === 3" style="width: 100%;height: 'auto'">
            <div>
                <h1>暂无该课程数据</h1>
            </div>

        </div>


    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import coursedetail from './coursedetail.vue';
const currentHeader = ref(0); // 当前活动的头部索引
const headers = ['推荐', '前端开发', '后端开发', '精品免费']; // 头部文本列表
const imageData = [
    { src: 'https://codelover.club/icons/course/icon1.svg', title: '简介：软件测试技术', tags: ['江导', '2024-4-23 8:00~2024-7-10 18:00'] },
    { src: 'https://codelover.club/icons/course/icon2.svg', title: '简介:程序设计', tags: ['罗勇胜', '2024-4-23 8:00~2024-7-10 18:00'] },
    { src: 'https://codelover.club/icons/course/icon3.svg', title: '简介：数据库高级应用', tags: ['李俊', '2024-4-23 8:00~2024-7-10 18:00'] },
    { src: 'https://codelover.club/icons/course/icon4.svg', title: '简介：后端技术与项目开发', tags: ['江导', '2024-4-23 8:00~2024-7-10 18:00'] },
    { src: 'https://codelover.club/icons/course/icon5.svg', title: '简介:24春季进销存系统', tags: ['罗勇胜', '2024-4-11 8:00~2024-7-31 18:00'] },
    { src: 'https://codelover.club/icons/course/icon6.svg', title: '简介：网页设计', tags: ['罗勇胜', '2024-4-10 8:00~2024-5-11 18:00'] },
    { src: 'https://codelover.club/icons/course/icon7.svg', title: '简介：前后端分离项目实战', tags: ['刁建忠', '2024-3-3 8:00~2024-3-31 18:00'] },
    { src: 'https://codelover.club/icons/course/icon3.svg', title: '简介:2024专业技能综合实践', tags: ['刁建忠', '2024-2-21 8:00~2024-7-20 18:00'] },
    { src: 'https://codelover.club/icons/course/icon6.svg', title: '简介：前端框架应用项目开发', tags: ['刁建忠', '2024-2-21 8:00~2024-7-19 18:00'] },
    { src: 'https://codelover.club/icons/course/icon7.svg', title: '简介:Web前端开发技术', tags: ['刁建忠', '2024-2-21 8:00~2024-7-20 18:00'] },
    { src: 'https://codelover.club/icons/course/icon5.svg', title: '简介:2024毕设与顶岗实习', tags: ['刁建忠', '2024-1-6 8:00~2024-7-29 18:00'] },
    // ...更多图片数据
    // ... 填充图片数据
];

const toggleContent = () => {
    if (currentHeader.value < headers.length - 1) {
        currentHeader.value++;
    } else {
        currentHeader.value = 0;
    }
};

const setHeader = (index: number) => {
    if (index >= 0 && index < headers.length) {
        currentHeader.value = index;
    }
};
</script>

<style scoped>
.course-card {
    margin: 0;
    /* padding: 16px; */
    width: 100%;
    height: 300px;
    margin-left: 40px;
    margin-top: -300px;
    border-radius: 4px;
    box-sizing: border-box;


}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 12px;
    background-color: #f5f5f5;
    width: 100%;
    /* 默认背景色 */
}

.header span {
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.header span.active {
    background-color: #ecf5ff;
    color: #409eff;
}

.image-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    grid-gap: 16px;
    width: 100%;
}

.image-card {
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.image-card img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.image-info {
    padding: 16px;
    background-color: #fff;
    border-radius: 4px;
    /* bottom: 0;
    position: absolute; */
    flex-grow: 1;
}

.image-info h4,
.image-info p {
    margin: 0;
}

@media (max-width: 600px) {
    .image-group {
        grid-template-columns: 1fr;
        /* 移动端改为单列 */
    }
}
</style>
